import React from 'react';
import { observer, inject } from 'mobx-react';
import * as mobx from 'mobx';
import { WeaSearchGroup, WeaFormItem, WeaInput } from 'ecCom';

import '../../style/analyze.less';
import * as _ from '../../util/common';

@inject('analyzeStore')
@observer
export default class BaseInfo extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div className='wf-analyze-baseInfo'>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@g3ihu8`} showGroup={true} needTigger={true} col={1} title={'基础信息'} items={this.getBaseInfo()} />
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@irzeyp`} showGroup={true} needTigger={true} col={1} title={'自定义页面信息'} items={this.getCustompageInfo()} />
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@w24mgf`} showGroup={true} needTigger={true} col={1} title={'代码块信息'} items={this.getCodeBlockInfo()} />
            </div>
        )
    }
    getBaseInfo = () => {
        const WfForm = window.opener.WfForm;
        const globalStore = WfForm.getGlobalStore();
        const { commonParam } = globalStore;
        const { f_weaver_belongto_userid, workflowname, workflowid, nodename, nodeid, modeid, requestid, formid } = commonParam;
        let items = [];
        f_weaver_belongto_userid && items.push(
            {
                com: <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@gxf081@${f_weaver_belongto_userid}`}
                    label={'用户id'}
                    labelCol={{ offset: 6, span: 3 }}
                    wrapperCol={{ span: 8 }}
                    underline
                >
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@t1nhmp@${f_weaver_belongto_userid}`} value={f_weaver_belongto_userid} viewAttr={1} />
                </WeaFormItem>
            }
        );
        workflowname && workflowid && items.push(
            {
                com: <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@4boc9y@${workflowid}`}
                    label={`所属路径  (流程id)`}
                    labelCol={{ offset: 6, span: 3 }}
                    wrapperCol={{ span: 8 }}
                    underline
                >
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@r2ixyg@${workflowid}`} value={`${workflowname} &nbsp; (${workflowid})`} viewAttr={1} />
                </WeaFormItem>
            }
        );
        nodename && nodeid && items.push(
            {
                com: <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@tjjg64@${nodeid}`}
                    label={'所属节点 (节点id)'}
                    labelCol={{ offset: 6, span: 3 }}
                    wrapperCol={{ span: 8 }}
                    underline
                >
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@4qh25c@${nodeid}`} value={`${nodename} &nbsp; (${nodeid})`} viewAttr={1} />
                </WeaFormItem>
            }
        );
        modeid && items.push(
            {
                com: <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@esky9v@${modeid}`}
                    label={'模板id'}
                    labelCol={{ offset: 6, span: 3 }}
                    wrapperCol={{ span: 8 }}
                    underline
                >
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@wkc0rf@${modeid}`} value={modeid} viewAttr={1} />
                </WeaFormItem>
            }
        );
        requestid && items.push(
            {
                com: <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@k6dwf1@${requestid}`}
                    label={'请求id'}
                    labelCol={{ offset: 6, span: 3 }}
                    wrapperCol={{ span: 8 }}
                    underline
                >
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@n3sunx@${requestid}`} value={requestid} viewAttr={1} />
                </WeaFormItem>
            }
        );
        formid && items.push(
            {
                com: <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@1fqa02@${formid}`}
                    label={'表单id'}
                    labelCol={{ offset: 6, span: 3 }}
                    wrapperCol={{ span: 8 }}
                    underline
                >
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@215e9a@${formid}`} value={formid} viewAttr={1} />
                </WeaFormItem>
            }
        );
        return items;
    }
    getCustompageInfo = () => {
        const { custompage = {} } = window.opener.WfForm_analyzeData;
        const { css, js, jsp } = custompage;
        let items = [];
        js && items.push(
            {
                com: <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@6nwf3z@js`}
                    label={'js'}
                    labelCol={{ offset: 6, span: 3 }}
                    wrapperCol={{ span: 8 }}
                >
                    {js.length == 0 ?
                        <div className='wf-analyze-baseInfo-customPage'> <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@1gl6ny@js`} value={'/'} viewAttr={1} /> </div> :
                        js.map(item => {
                            return <div className='wf-analyze-baseInfo-customPage'> <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@psr8kh@js`} value={item} viewAttr={1} /> </div>
                        })
                    }
                </WeaFormItem>
            }
        )
        jsp && items.push(
            {
                com: <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@phpugm@jsp`}
                    label={'jsp'}
                    labelCol={{ offset: 6, span: 3 }}
                    wrapperCol={{ span: 8 }}
                >
                    {jsp.length == 0 ?
                        <div className='wf-analyze-baseInfo-customPage'> <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@4ewxx3@jsp`} value={'/'} viewAttr={1} /> </div> :
                        jsp.map(item => {
                            return <div className='wf-analyze-baseInfo-customPage'> <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@ognfmj@jsp`} value={item} viewAttr={1} /> </div>

                        })
                    }
                </WeaFormItem>
            }
        )
        return items;
    }

    getCodeBlockInfo = () => {
        const { scriptContent } = window.opener.WfForm_analyzeData;
        let items = [];
        scriptContent && items.push(
            {
                com: <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@qnrg1o@scriptContent`}
                    label={'代码块'}
                    labelCol={{ offset: 6, span: 3 }}
                    wrapperCol={{ span: 8 }}
                >
                    <textarea
                        style={{
                            border: "1px solid #ebebeb",
                            padding: "10px",
                            width: "100%",
                            height: "200px"
                        }} value={scriptContent}>

                    </textarea>
                </WeaFormItem>
            }
        )
        return items;
    }
}